<template>
    <view>
        <scroll-view @scrolltolower="sljz" class="films" :scrollY="true" :style="'height:' + scrollHeight + 'px'">
            <view class="page">
                <view class="page__bd">
                    <view class="weui-panel__hd">
                        <view class="weui-search-bar">
                            <view class="weui-search-bar__form">
                                <view class="weui-search-bar__box">
                                    <icon class="weui-icon-search_in-box" size="16" type="search"></icon>
                                    <input
                                        @confirm="searchData"
                                        @input="inputTyping"
                                        class="weui-search-bar__input"
                                        :focus="inputShowed"
                                        placeholder="输入关键字"
                                        placeholderStyle="font-size:25rpx;"
                                        type="text"
                                        :value="inputVal"
                                    />
                                    <view @tap="clearInput" class="weui-icon-clear" v-if="inputVal.length > 0">
                                        <icon size="14" type="clear"></icon>
                                    </view>
                                </view>
                                <label @tap="showInput" class="weui-search-bar__label" v-if="!inputShowed">
                                    <icon class="weui-icon-search" size="16" type="search"></icon>
                                    <view class="weui-search-bar__text">搜索</view>
                                </label>
                            </view>
                            <view @tap="searchData" class="weui-search-bar__cancel-btn" v-if="inputShowed" :style="'color:' + color">搜索</view>
                        </view>
                        <block v-if="searchLogShowed">
                            <view @tap="clearSearchLog" class="clear-search-log">
                                <view>历史搜索</view>
                                <image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/qksj.png"></image>
                            </view>
                            <view>
                                <view @tap="searchDataByLog" class="search-log" :data-log="searchLog" v-for="(searchLog, index) in searchLogList" :key="searchLog.searchLogListId">
                                    {{ searchLog }}
                                </view>
                            </view>
                        </block>
                    </view>
                    <view class="jzz" v-if="!qqsj">
                        <image class="Rotation" src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/jzz.png"></image>
                        <view>加载中...</view>
                    </view>
                    <block v-if="qqsj">
                        <view
                            :class="'sjlb flex-row ' + (item.is_yy == 2 && mdxx.isyykg == 1 ? 'bszz' : '')"
                            v-if="item.aa1 != NaN"
                            v-for="(item, index) in storelist"
                            :key="index"
                        >
                            <navigator class="sjleft flex-grow-0" :url="'/ymq_canyino2o/pages/takeout/takeoutindex?storeid=' + item.id">
                                <image class="sjleftimg" :src="item.logo"></image>
                                <view class="xzhiding" v-if="item.is_brand == '1'">品牌</view>
                            </navigator>

                            <view class="sjright flex-grow-1 flex-col">
                                <navigator :url="'/ymq_canyino2o/pages/takeout/takeoutindex?storeid=' + item.id">
                                    <view class="sjright1 flex-row flex-y-center">
                                        <view class="sjright1-l gobyndsingle">{{ item.name }}</view>
                                        <view class="isyy" v-if="item.is_yy == 2 && mdxx.isyykg == 1">休息中</view>
                                    </view>
                                    <view class="sjright2 flex-bet flex-y-center">
                                        <view class="flex-row flex-grow-1 flex-y-center">
                                            <view class="pingjia_fenshu3">
                                                <view class="kximg">
                                                    <image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/i-star.png"></image>
                                                </view>
                                                <view class="sximg" :style="'width: ' + item.sales * 20 + '%'">
                                                    <image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/i-stars.png"></image>
                                                </view>
                                            </view>
                                            <view class="pingfen">{{ item.sales }}</view>
                                            <view class="recommed_midel">月售{{ item.score }}单</view>
                                        </view>
                                        <view class="sjright2-r flex-grow-0 flex-row flex-y-center" v-if="item.is_ps == '1'">
                                            <view class="sjright2-r1">{{ item.ps_mode }}</view>
                                            <view class="sjright2-r2">准时达</view>
                                        </view>
                                    </view>
                                    <view class="sjright3 flex-bet flex-y-center">
                                        <view class="flex-row flex-y-center">
                                            <view class="sjright3text" style="padding-left: 0" v-if="item.is_ps == '1'">起送￥{{ item.start_at }}</view>
                                            <view class="sjright3text" style="border-right: 0" v-if="item.is_ps == '1'">配送￥{{ item.ps_money }}起</view>
                                            <view class="sjright3text" style="border-right: 0" v-if="item.is_ps != '1'">人均￥{{ item.capita }}/人</view>
                                        </view>
                                        <view class="flex-row flex-y-center">
                                            <view class="sjright3text" :style="'border-right:' + (item.is_ps == '1' ? '' : 0)" v-if="item.is_ps != '1'">离你{{ item.aa }}</view>
                                            <view class="sjright3text" v-if="item.is_ps == '1'">{{ item.aa }}</view>
                                            <view class="sjright3text" style="border-right: 0; padding-right: 0" v-if="item.is_ps == '1'">{{ item.ps_time }}</view>
                                        </view>
                                    </view>
                                </navigator>
                                <view class="sjright4" v-if="item.mj.length > 0 && item.xyh_open == '1'">
                                    <view class="sjright4-l flex-grow-1" v-if="item.mj.length > 0">
                                        <view class="flex-row">
                                            <view class="mj">减</view>
                                            <view class="gobyndsingle">
                                                <text v-for="(i, index1) in item.mj" :key="index1">满{{ i.full }}减{{ i.reduction }},</text>
                                            </view>
                                        </view>
                                        <view class="flex-row" v-if="item.xyh_open == '1'">
                                            <view class="xyh">新</view>
                                            <view class="gobyndsingle">新用户下单立减{{ item.xyh_money }}元</view>
                                        </view>
                                    </view>
                                    <view class="sjright4-r flex-grow-0">
                                        <image :class="'sjright4-rimg ' + (item.open ? 'show' : 'close')" src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/down.png"></image>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="jzz" v-if="!jzgd">
                            <image class="Rotation" src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/jzz.png"></image>
                            <view>加载中...</view>
                        </view>
                        <view class="kong" v-if="storelist.length == 0 && mygd">
                            <image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/wushuju.png"></image>
                            <view>暂无相关数据</view>
                        </view>
                        <view class="jzwb" v-if="mygd">
                            <view class="hx"></view>
                            <view class="wz">加载完毕</view>
                            <view class="hx"></view>
                        </view>
                    </block>
                </view>
                <view class="page__ft"></view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import cardlist from '@/ymq_canyino2o/dist/cardlist/index';
import gettel from '@/ymq_canyino2o/dist/gettel/index';
var qqmapsdk;
var app = getApp();
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
var util = require('../../utils/util.js');
var pageNum = 1;
var searchTitle = '';
var msgListKey = '';
export default {
    components: {
        cardlist,
        gettel
    },
    data() {
        return {
            qqsj: true,
            msgList: [],
            searchLogList: [],
            hidden: true,
            scrollTop: 0,
            inputShowed: false,
            inputVal: '',
            searchLogShowed: true,
            scrollHeight: 0,
            pagenum: 1,
            storelist: [],
            bfstorelist: [],
            mygd: false,
            jzgd: true,
            isjzz: true,

            params: {
                nopsf: 2,
                nostart: 2,
                yhhd: ''
            },

            mdxx: {
                isyykg: 0
            },

            windowHeight: '',
            windowWidth: '',
            url: '',
            isxlsxz: false,
            color: '',

            searchLog: {
                searchLogListId: ''
            },

            NaN: '',

            i: {
                full: '',
                reduction: ''
            }
        };
    },
    onLoad: function (t) {
        app.globalData.setNavigationBarColor(this);
        var that = this;
        that.setData({
            mdxx: uni.getStorageSync('bqxx')
        });
        var e = getApp().globalData.imgurl;
        uni.getSystemInfo({
            success: function (t) {
                that.setData({
                    windowHeight: t.windowHeight,
                    windowWidth: t.windowWidth,
                    searchLogList: uni.getStorageSync('searchLog') || [],
                    url: e
                });
            }
        });
        qqmapsdk = new QQMapWX({
            key: uni.getStorageSync('bqxx').map_key
        });
        console.log(uni.getStorageSync('bqxx'));
        that.dwreLoad();
        uni.getSystemInfo({
            success: function (t) {
                that.setData({
                    scrollHeight: t.windowHeight
                });
            }
        });
    },
    onReady: function () {},
    onShow: function () {},
    onHide: function () {},
    onUnload: function () {},
    methods: {
        dwreLoad: function () {
            var that = this;
            var o = this.params;
            uni.getLocation({
                type: 'wgs84',
                success: function (t) {
                    var a = t.latitude;
                    var e = t.longitude;
                    o.lat = a;
                    o.lng = e;
                    that.setData({
                        params: o
                    });
                },
                fail: function () {
                    uni.getSetting({
                        success: function (t) {
                            console.log(t);
                            if (0 == t.authSetting['scope.userLocation']) {
                                uni.showModal({
                                    title: '提示',
                                    content: '您点击了拒绝授权,无法正常使用功能，点击确定重新获取授权。',
                                    showCancel: false,
                                    success: function (t) {
                                        if (t.confirm) {
                                            console.log('用户点击确定');
                                            uni.openSetting({
                                                success: function (t) {
                                                    t.authSetting['scope.userLocation'];
                                                    that.dwreLoad();
                                                }
                                            });
                                        }
                                    }
                                });
                            }
                        }
                    });
                },
                complete: function (t) {}
            });
        },

        sljz: function () {
            console.log('上拉加载', this.pagenum);
            if (this.mygd || !this.jzgd || this.isjzz) {
                uni.showToast({
                    title: '没有更多了',
                    icon: 'loading',
                    duration: 1000
                });
            } else {
                this.setData({
                    jzgd: false
                });
                this.getstorelist();
            }
        },

        getstorelist: function () {
            var that = this;
            var i = that.pagenum;
            that.params.page = i;
            that.params.pagesize = 20;
            that.params.keywords = searchTitle;
            console.log(i, that.params);
            that.setData({
                isjzz: true
            });
            app.globalData.util.request({
                url: 'entry/wxapp/StoreList',
                cachetime: '0',
                data: that.params,
                success: function (t) {
                    console.log('分页返回的商家列表数据', t.data);
                    if (t.data.length < 10) {
                        that.setData({
                            mygd: true,
                            jzgd: true,
                            isjzz: false
                        });
                    } else {
                        that.setData({
                            jzgd: true,
                            pagenum: i + 1,
                            isjzz: false
                        });
                    }
                    var a = that.bfstorelist;
                    a = (function (t) {
                        for (var a = [], e = 0; e < t.length; e++) {
                            if (-1 == a.indexOf(t[e])) {
                                a.push(t[e]);
                            }
                        }
                        return a;
                    })((a = a.concat(t.data)));
                    for (var e = 0; e < t.data.length; e++) {
                        if ('0.0' == t.data[e].sales) {
                            t.data[e].sales = '5.0';
                        }
                        var s = parseFloat(t.data[e].juli);
                        console.log(s);
                        console.log();
                        if (s < 1000) {
                            t.data[e].aa = s + 'm';
                        } else {
                            t.data[e].aa = (s / 1000).toFixed(2) + 'km';
                        }
                        t.data[e].aa1 = s;
                        that.setData({
                            storelist: a,
                            bfstorelist: a,
                            isxlsxz: false
                        });
                    }
                    console.log(a);
                    that.setData({
                        qqsj: true
                    });
                }
            });
        },

        tzsj: function (t) {
            console.log(t.currentTarget.dataset.src);
            uni.navigateTo({
                url: t.currentTarget.dataset.src
            });
        },

        scroll: function (t) {
            this.setData({
                scrollTop: t.detail.scrollTop
            });
        },

        showInput: function () {
            if ('' != uni.getStorageSync('searchLog')) {
                this.setData({
                    inputShowed: true,
                    searchLogShowed: true,
                    searchLogList: uni.getStorageSync('searchLog')
                });
            } else {
                this.setData({
                    inputShowed: true,
                    searchLogShowed: true
                });
            }
        },

        searchData: function () {
            console.log(searchTitle);
            var that = this;
            if ('' != searchTitle) {
                var a = that.searchLogList;
                if (-1 === a.indexOf(searchTitle)) {
                    a.unshift(searchTitle);
                    uni.setStorageSync('searchLog', a);
                    that.setData({
                        searchLogList: uni.getStorageSync('searchLog')
                    });
                }
                that.setData({
                    qqsj: false,
                    msgList: [],
                    scrollTop: 0,
                    pagenum: 1,
                    storelist: [],
                    bfstorelist: [],
                    mygd: false,
                    jzgd: true,
                    isjzz: true
                });
                that.getstorelist();
            } else {
                uni.showToast({
                    title: '搜索内容为空',
                    icon: 'loading',
                    duration: 1000
                });
            }
        },

        clearInput: function () {
            this.setData({
                msgList: [],
                scrollTop: 0,
                inputVal: ''
            });
            searchTitle = '';
        },

        inputTyping: function (t) {
            if ('' != uni.getStorageSync('searchLog')) {
                this.setData({
                    inputVal: t.detail.value,
                    searchLogList: uni.getStorageSync('searchLog')
                });
            } else {
                this.setData({
                    inputVal: t.detail.value,
                    searchLogShowed: true
                });
            }
            searchTitle = t.detail.value;
        },

        searchDataByLog: function (t) {
            searchTitle = t.target.dataset.log;
            console.log(t.target.dataset.log);
            this.setData({
                msgList: [],
                scrollTop: 0,
                inputShowed: true,
                inputVal: searchTitle
            });
            this.searchData();
        },

        clearSearchLog: function () {
            this.setData({
                hidden: false
            });
            uni.removeStorageSync('searchLog');
            this.setData({
                scrollTop: 0,
                hidden: true,
                searchLogList: []
            });
        }
    }
};
</script>
<style>
@import './sssj.css';
</style>
